<template>
  <div class="row">
    <div class="col-md-12">
      <Table
        title="桥梁回收站"
        :pageData="pageData"
        searchHint="输入关键字搜索，多个关键字用空格隔开"
        @sizeChange="handleSizeChange"
        @pageTurning="handlePageTurning"
        @sortChange="handleSortChange"
        @filterChange="handleFilterChange"
        @search="handleSearch">

        <!--索引列-->
        <el-table-column type="index" align="center" width="80px"></el-table-column>
        <!--表格主体内容-->
        <el-table-column v-for="col of columns"
                         align="center"
                         :key="col.prop"
                         :prop="col.prop"
                         :label="col.label"
                         :width="col.width"
                         :sortable="col.sortable">
        </el-table-column>
        <!--可筛选列-->
        <el-table-column align="center"
                         prop="bridgeCategoryName"
                         column-key="bridgeCategoryId"
                         label="桥梁分类"
                         width="150"
                         :filters="bridgeCategoryFilters"
                         filter-placement="bottom">
        </el-table-column>

        <!--最后一列-->
        <el-table-column align="center" prop="deleteStatusName" label="删除原因" width="200"></el-table-column>

        <!--操作列-->
        <el-table-column v-if="canRestore" label="操作" align="center" width="70">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleRestore(scope.row)">还原</el-button>
          </template>
        </el-table-column>
      </Table>
    </div>
  </div>
</template>

<script>
  import Table from "../bridge/Table.vue"
  import {doGet, doPost} from "../../../assets/js/utils/RequestUtils"
  import {COMPLETE, LOADING} from "../../../store/mutationTypes"
  import {hasAuthorizedFunction, getAuthorizedFunction} from "../../../assets/js/global"
  import {RESTORE} from "../../../assets/js/enum/FunctionType"

  const DATA_URL = "/bridge/trash/getTrashBridgeList",
    BRIDGE_CATEGORY_URL = "/bridge/trash/getBridgeCategoryList",
    RESTORE_URL = "/bridge/trash/restore";

  export default {
    name:"BridgeManagement",
    data() {
      return {
        pageData: {
          data:[],
          pageSize:10,
          total:0,
          currentPage:1,
        },
        columns: [
          {prop:"name", label:"桥名", width:"200"},
          {prop:"roadNo", label:"路线号", sortable:"custom", width:"150"},
          {prop:"fullAddressName", label:"所在地"},
          {prop:"unitsName", label:"管养单位"}
        ],
        //根据搜索框输入的内容自动分割
        searchValues: [],
        sortProp:"",
        order:"",
        filter:{prop:"", values:[]},
        bridgeCategoryList:[],
      }
    },
    computed: {
      bridgeCategoryFilters() {
        return this.bridgeCategoryList.map(item=>{
          return {text:item.name, value:item.id};
        })
      },
      canRestore() {
        return hasAuthorizedFunction(this, RESTORE);
      }
    },
    methods:{
      handleSizeChange(pageSize) {
        this.pageData.pageSize = pageSize;
        this.fetchData();
      },
      handlePageTurning(index) {
        this.pageData.currentPage = index;
        this.fetchData();
      },
      handleSearch(value) {
        this.searchValues = value.split(" ");
        this.fetchData();
      },
      handleSortChange({column, prop, order}) {
        this.sortProp = prop;
        this.order = order;
        this.fetchData();
      },
      handleFilterChange(filter) {
        this.filter = filter;
        this.fetchData();
      },
      handleRestore(data) {
        this.$confirm('此操作将还原这座桥梁, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            doPost(RESTORE_URL, {data, menuFunctionId:getAuthorizedFunction(this, RESTORE), component:this})
              .then(response=>this.$message({message:response.message, type:response.status.toLowerCase()}))
              .finally(()=>this.fetchData());
          })
          .catch(() => this.$message({type: 'info', message: '已取消还原'}));
      },
      fetchData() {
        this.$store.commit(LOADING);
        doGet(DATA_URL, {
          data:{
            pageSize:this.pageData.pageSize,
            currentPage:this.pageData.currentPage,
            searchArray:this.searchValues,
            sortProp:this.sortProp,
            order:this.order,
            filterProp:this.filter.prop,
            filterValues:this.filter.values
          },
          component:this
        })
          .then(response=>this.pageData = response)
          .finally(()=>this.$store.commit(COMPLETE))
      },
      fetchDataByUrl(url) {
        return doGet(url, {component:this});
      },
      //获取下拉选项数据
      fetchSelectorData() {
        this.fetchDataByUrl(BRIDGE_CATEGORY_URL).then(response=>this.bridgeCategoryList = response);
      }
    },
    created() {
      this.fetchSelectorData();
      this.fetchData();
    },
    activated() {
      this.fetchData();
    },
    components:{Table}
  }
</script>

<style>
  .el-upload,.el-upload-dragger {
    width: 100%!important;
  }
  .el-upload__input {
    display: none!important;
  }
</style>



// WEBPACK FOOTER //
// BridgeTrash.vue?4fc7b696
